<template>
  <div class="app-container">
    <div v-if="isApply">
      <el-input v-model="listQuery.sociaty_no" placeholder="公会号" style="width:200px" clearable></el-input>
      <el-button type="primary" @click="getList" icon="el-icon-search"  >搜索</el-button>

      <el-table :data="menuList" style="margin-bottom: 20px;margin-top: 10px;" row-key="sociaty_no" border>
        <el-table-column prop="sociaty_no" label="公会号" > </el-table-column>
        <el-table-column prop="sociaty_name" label="公会名称" > </el-table-column>
        <el-table-column min-width="280" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleVerify()" plain>申请加入</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="joinList">
        <span>我的申请</span>
        <el-table :data="menuList2" style="margin-bottom: 20px;margin-top: 10px;" row-key="id" border>
<!--          <el-table-column prop="apply_id" label="申请记录编号" > </el-table-column>-->
<!--          <el-table-column prop="sociaty_id" label="公会ID" > </el-table-column>-->
<!--          <el-table-column prop="hall_id" label="厅ID" > </el-table-column>-->
          <el-table-column prop="add_time" label="申请时间" > </el-table-column>
          <el-table-column prop="type" label="类别" >
            <template slot-scope="scope">
              {{ scope.row.type === 1?'申请加入':'' }}
              {{ scope.row.type === 2?'申请退出':'' }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" >
            <template slot-scope="scope">
              {{ scope.row.status === 1?'待审核':'' }}
              {{ scope.row.status === 2?'审核通过':'' }}
              {{ scope.row.status === 3?'审核失败':'' }}
            </template>
          </el-table-column>
<!--          <el-table-column prop="update_time" label="更新时间" > </el-table-column>-->
<!--          <el-table-column prop="deal_type" label="deal_type" > </el-table-column>-->
<!--          <el-table-column prop="admin_id" label="管理员ID" > </el-table-column>-->
          <el-table-column prop="sociaty_no" label="公会号" > </el-table-column>
          <el-table-column prop="sociaty_name" label="公会名称" > </el-table-column>
          <el-table-column min-width="280" label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === 1" type="primary" size="mini" @click="handleVerify2(scope.row)" plain>撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="text-align: center;" v-if="!isApply">
      <div>当前所在公会</div>
      <div><img :src="joinListData.avatar" alt="" style="width: 100px;min-height: 100px;border-radius: 50%;"></div>
      <div style="font-size: 30px;"> {{joinListData.sociaty_name}}</div>
      <div style="margin:20px 0;">{{joinListData.add_time}}</div>
      <el-button type="primary" size="mini" @click="outapplyF()" plain>退出公会</el-button>
    </div>
  </div>
</template>

<script>
  import { treeMenu, joinList, outapply, searchList, joinapplyF, joinListF, rollback } from '@/api/hall/joinapply'

  import treeTable from '@/components/TreeTable'
  import { validateCh } from '@/utils/validate'

  export default {
    components: { treeTable },
    data() {
      const _validateCh = (rule, value, callback) => {
        if (!!value && validateCh(value)) {
          callback(new Error('不能包含中文'))
        }
        callback()
      }
      return {
        expandAll: false,
        isApply: false,
        // expandAll: true, // 是否全部展开
        expandAllTitle: '展开全部',
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10,
          status:1
        },
        menuList: [],
        menuList2: [],
        menuTree: [],// 树形菜单
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          'admin_account': undefined,
          'password': undefined,
          'sociaty_no': undefined,
        },
        sociatyData:[],
        joinListData:'',
        optionsStatus: [{value:undefined,label: '全部状态'},{value: '1',label: '正常'},{value: '2',label: '封禁'}],
        optionsLevel: [{value:undefined,label: '全部类别'},{value: '1',label: '公会'},{value: '2',label: '厅'}],
        rules: {
          admin_account: [
            { required: true, message: '请输入管理员姓名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入管理员密码', trigger: 'blur' }
          ],
          sociaty_no: [
            { required: true, message: '请输入厅的号码', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      // this.getList()
    },
    mounted() {
      this.joinList();
    },
    methods: {
      joinList(){
        joinList().then(response => {
          if (response.code === 200) {
            if(response.data.sociaty_name ===''){
              this.isApply =true
              this.joinListF()
            }else{
              this.isApply =false
              this.joinListData = response.data
            }
          }
        })
      },
      outapplyF(){
        outapply().then(response => {
          if (response.code === 200) {
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      getList() {
        this.listLoading = true
        let urlData = '?';
        if(this.listQuery.sociaty_no){ urlData = urlData + `&sociaty_no=${this.listQuery.sociaty_no}`}
        searchList(urlData).then(response => {
          this.menuList = [response.data]
          this.listLoading = false
        })
      },
      handleVerify() {
        let data = { sociaty_no: this.menuList[0].sociaty_no }
        joinapplyF(data).then(response => {
          if (response.code === 200) {
            this.joinListF()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      handleVerify2(row) {
        let data = { apply_id: row.apply_id }
        rollback(data).then(response => {
          if (response.code === 200) {
            this.joinListF()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      joinListF(){
        joinListF().then(response => {
          if (response.code === 200) {
            this.menuList2 = response.data.list
            // this.submitOk(response.message)
          }
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        // this.form = Object.assign({}, row) // copy obj  此方法在这里暂时不能使用，会出错 -> 有多余参数
        this.form.admin_account = row.admin_account
        this.form.password = row.password
        this.form.sociaty_no = row.sociaty_no

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        let parentNode = this.findTreeNode(row.parentId)
        if (parentNode) {
          this.form.parent_id = parentNode.menu_name
        }

        this.form = Object.assign({}, this.form)
      },
      handleDelete(row) {
        deleteMenu(row.sociaty_id).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        // this.form.parent_id = undefined;
        this.$refs['dataForm'].validate(valid => {
          let md5PW = md5(this.form.password)
          this.form.password = md5PW
          if (valid && this.dialogStatus === 'create') {
            saveMenu(this.form).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.submitFail(123456)
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }else if(valid && this.dialogStatus === 'update'){
            updateMenu(this.form).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }
        })
      },
      cache(){
        cacheMenu(this.form).then(response => {
          this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
        })
      },
      findTreeNode(id) {
        let node = this._.find(this.menuList, { id: parseInt(id) })
        return node
      },
      handleExpand() {
        this.expandAll = !this.expandAll
        this.expandAllTitle = this.expandAll ? '折叠全部' : '展开全部'
      },
      resetForm() {
        this.form = {
          'admin_account': undefined,
          'password': undefined,
          'sociaty_no': undefined,
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      },
      handleAvatarSuccess(res, file) {

      },

    }
  }
</script>
